<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>文章发布页面</title>
	<link rel="stylesheet" type="text/css" href="/sungui/vendor/layui-v2.3.0/css/layui.css">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			outline: none;
		}
		html,body{
			margin: 0;
			padding: 0;
			color: #666;
			font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
			background-color: #EAEAEA;
		}
		.admin-layout-side{
			width: 250px;
			background-color: #20222A !important;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			color: rgba(255,255,255,.8);
			transition: all .3s ease;
		}
		.admin-layout-main {
			/*background-color: #fff;*/
			position: absolute;
			left: 250px;
			top: 0;
			right: 0;
			bottom: 0;
			transition: all .3s ease;
		}
		/*.admin-layout-header {
			width: 100%;
			height: 50px;
		}*/
		.admin-layout-side-header, .admin-layout-main-header {
			width: 100%;
			height: 50px;
			line-height: 50px;
			padding-left: 10px;
		}
		.admin-layout-side-header {
			background-color: #1C86EE;
			font-weight: normal;
			white-space: nowrap;
		}
		.admin-layout-main-header, .admin-layout-main-content {
			background-color: #fff;
		}
		.admin-layout-main-content {
			margin: 10px;
			padding: 10px;
		}
		.admin-layout-side-small {
			width: 50px;
		}
		.admin-layout-side-small > .admin-layout-side-content > .admin-nav-tree > .admin-nav-item > a > span {
			display: none;
		}
		.admin-layout-main-big {
			left: 50px;
		}
		.admin-layout-side-content{
			position: relative;
		}
		.admin-nav-tree {
			/*line-height: 10px;*/
		}
		.admin-nav-item {
			line-height: 45px;
		}
		.admin-layout-side-content > .admin-nav-tree > .admin-nav-item > a {
			padding-left: 10px;
		}
		.admin-nav-item > a > i {
			margin-right: 10px;
		}
		.admin-nav-item > a {
			color: #EEE9E9;
			display: block;
			/*transition: .3s linear;*/
		}
		.admin-nav-item > a:hover {
			background-color: #282828;
			/*border-left-style: solid;
			border-left-width: 3px;
			border-left-color: #1C86EE;*/
		}
		.form-row {
			margin: 10px 0px 10px 0px;
		}
		.form-row > input[type='text'], .form-row > textarea {
			padding:5px 5px 5px 5px;
		}
	</style>
	<script type="text/javascript" src="/sungui/vendor/jquery/3.3.1/jquery.min.js"></script>
	<!-- <script type="text/javascript" src="/sungui/vendor/ckeditor5-build-classic/ckeditor.js"></script> -->
	<script type="text/javascript" src="/sungui/vendor/ckeditor5-build-decoupled-document/ckeditor.js"></script>
	<!-- <script type="text/javascript" src="/sungui/vendor/ckeditor5-build-classic/translations/zh-cn.js"></script> -->
	<script type="text/javascript" src="/sungui/vendor/ckeditor5-build-decoupled-document/translations/zh-cn.js"></script>
</head>
<body>
	<div class="admin-layout-side" id="admin-layout-side">
		<div class="admin-layout-side-header">
			侧边栏
		</div>
		<div class="admin-layout-side-content">
			<ul class="admin-nav-tree">
				<li class="admin-nav-item">
					<a href="javascript:void(0);" title="主页"><i class="layui-icon layui-icon-home"></i><span>首页</span></a>
				</li>
				<li class="admin-nav-item">
					<a href="javascript:void(0);" title="文章管理"><i class="layui-icon layui-icon-file-b"></i><span>文章管理</span></a>
				</li>
				<li class="admin-nav-item">
					<a href="javascript:void(0);" title="评论管理"><i class="layui-icon layui-icon-reply-fill"></i><span>评论管理</span></a>
				</li>
				<li class="admin-nav-item">
					<a href="javascript:void(0);" title="用户管理"><i class="layui-icon layui-icon-user"></i><span>用户管理</span></a>
				</li>
				<li class="admin-nav-item">
					<a href="javascript:void(0);" title="系统设置"><i class="layui-icon layui-icon-set"></i><span>系统设置</span></a>
				</li>
			</ul>
		</div>
	</div>
	<div class="admin-layout-main" id="admin-layout-main">
		<div class="admin-layout-main-header">
			<a href="javascript:void(0);" id="side-bton">
				<i class="layui-icon layui-icon-shrink-right" title="隐藏侧边栏"></i>
			</a>
		</div>
		<div class="admin-layout-main-content">
			<form>
				<div class="form-row">
					<input type="text" name="">
				</div>
				<div class="form-row">
					<div id="toolbar-container"></div>
					<!-- <textarea name="content" id="editor"></textarea> -->
					<div id="editor">
						<p>This is the initial editor content.</p>
					</div>
					<!-- <script>
						ClassicEditor
						.create( document.querySelector( '#editor' ), {
							language: 'zh-cn',
						    toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote','undo','redo', 'imageUpload', 'Code' ]
						} )
						.then( editor => {
							console.log(editor.plugins.get( 'Clipboard' ));
						})
						.catch( error => {
							console.error( error );
						} );
					</script> -->
					<script>
						DecoupledEditor
						.create( document.querySelector( '#editor' ), {
							language: 'zh-cn'
						} )
						.then( editor => {
							const toolbarContainer = document.querySelector( '#toolbar-container' );
							toolbarContainer.appendChild( editor.ui.view.toolbar.element );
						} )
						.catch( error => {
							console.error( error );
						} );
					</script>
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#side-bton").click(function(){
				$("#admin-layout-side").toggleClass("admin-layout-side-small");
				if($("#admin-layout-side").hasClass("admin-layout-side-small")){
					$("#admin-layout-side > .admin-layout-side-header").html("侧边");
				} else {
					$("#admin-layout-side > .admin-layout-side-header").html("侧边栏");
				}
				$("#admin-layout-main").toggleClass("admin-layout-main-big");
				$("#side-bton > i").toggleClass("layui-icon-spread-left");
			});
		});
	</script>
</body>
</html>